<template>
  <div class="agent-config-container">
    <div class="config-header">
      <el-page-header @back="goBack" :title="agent?.name || '智能体配置'">
        <template #content>
          <span class="page-title">配置</span>
        </template>
      </el-page-header>
    </div>

    <div class="config-content">
      <!-- 配置表单 -->
      <el-card class="config-form">
        <template #header>
          <div class="card-header">
            <span>基础配置</span>
            <div class="action-buttons">
              <el-button type="primary" @click="handleSave">保存配置</el-button>
              <el-button type="success" @click="testDrawerVisible = true">测试对话</el-button>
            </div>
          </div>
        </template>

        <el-form :model="configForm" label-width="120px">
          <el-form-item label="智能体名称">
            <el-input
              v-model="configForm.name"
              placeholder="请输入智能体名称"/>
          </el-form-item>

          <el-form-item label="智能体描述">
            <el-input
              v-model="configForm.note"
              type="textarea"
              :rows="2" maxlength="250"
              placeholder="请输入智能体描述"/>
          </el-form-item>

          <el-form-item label="模型">
            <el-select v-model="configForm.model" placeholder="选择模型">
              <el-option
                v-for="item in modelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="温度">
            <el-slider
              v-model="configForm.temperature"
              :min="0"
              :max="2"
              :step="0.1"
              show-input/>
          </el-form-item>

          <el-form-item label="系统提示词">
            <el-input
              v-model="configForm.systemPrompt"
              type="textarea"
              :rows="6"
              placeholder="设置智能体的行为和角色定位"/>
          </el-form-item>

          <el-form-item label="知识库">
            <el-select
              v-model="configForm.knowledgeBase"
              multiple
              placeholder="选择关联的知识库">
              <el-option
                v-for="item in knowledgeBaseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="是否公开">
            <el-switch v-model="configForm.isPublic"/>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 抽屉式测试对话 -->
    <el-drawer
      v-model="testDrawerVisible"
      title="测试对话"
      size="50%"
      direction="rtl"
      destroy-on-close>
      <ChatTestDialog
        :agent-id="route.params.id"
        :config="configForm"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import ChatTestDialog from '@/components/chat/ChatTestDialog.vue'
import http from "@/utils/request.js";

const route = useRoute()
const router = useRouter()

// 智能体信息
const agent = ref(null)

// 控制测试对话抽屉的显示
const testDrawerVisible = ref(false)

// 配置表单
const configForm = reactive({
  id:null,
  name: '',
  note: '',
  model: 'ep-20250219225638-x9wwt',
  temperature: 0.7,
  systemPrompt: '',
})

// 模型选项
const modelOptions = ref([
  { value: 'ep-20250204163109-jw9ch', label: 'Doubao-1.5-pro-256k' },
  { value: 'ep-20250204162538-9cmb2', label: 'DeepSeek-R1' },
  { value: 'ep-20250204190620-9n94t', label: 'DeepSeek-V3' },
  { value: 'ep-20250219225638-x9wwt', label: 'DeepSeek-R1-32B' },
])


// 知识库选项
const knowledgeBaseOptions = ref([
  { label: '知识库1', value: 'kb1' },
  { label: '知识库2', value: 'kb2' },
])

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取智能体配置
const fetchAgentConfig = async () => {
  try {
    const agentId = route.query.id;
    console.info('agentId', agentId)
    if (!agentId){
      return
    }
    let param={};
    param.id= agentId;
    const res =await  http.post("/agent/view", param)


    if (res.code===200) {
      Object.assign(configForm, res.data)
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error('获取配置失败:', error)
    ElMessage.error('获取配置失败')
  }
}

// 保存配置
const handleSave = async () => {
  try {
    let url='/agent/create';
    if (configForm.id){
      url='/agent/update';
    }
    const res =await  http.post(url, configForm)
    if (res.code===200) {
      if (url==='/agent/create'){
        configForm.id=res.data.id;
      }
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

onMounted(() => {
  fetchAgentConfig()
})
</script>

<style scoped>
.agent-config-container {
  padding: 20px;
  height: 100%;
}

.config-header {
  margin-bottom: 20px;
}

.config-header .page-title {
  font-size: 18px;
  font-weight: bold;
}

.config-content {
  width: 100%;
  height: calc(100% - 60px);
  max-width: 1000px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header .action-buttons {
  display: flex;
  gap: 10px;
}

.config-form {
  margin-bottom: 0;
  height: fit-content;
  width: 100%;
}
</style>
